<template>
 <div class="w-full h-screen parent" >
    <el-container class="w-full h-full">
      <el-header class="bg-white border flex justify-around">
        <div>

        </div>
        <h1 class="text-3xl mt-2 ">
          运动健康推荐系统
        </h1>
        <div>
          <el-button class="mt-2" type="primary" @click="()=>{login()}">登录</el-button>
        </div>
      </el-header>
      <el-main>
        <div class="w-2/3 m-auto" >
          <el-carousel :interval="5000" arrow="always" class="h-full">
            <el-carousel-item class="h-full " v-for="item in pics" :key="item">
<!--              <h3 text="2xl" justify="center">{{ item }}</h3>-->
              <img :src="item" class="w-full h-full">
            </el-carousel-item>

        </el-carousel>
        </div>
        <div class=" mt-10 w-2/3 m-auto gap-10 flex  justify-center">
          <div class="w-full hover:shadow-2xl">
            <el-card style="height: 200px">
              <template #header>
                <div class="text-2xl ">
                  运动资讯
                </div>
              </template>
              在本系统中你可以获取一些主流运动的运动资讯
            </el-card>
          </div>

          <div class="w-full hover:shadow-2xl">
            <el-card style="height: 200px">
              <template #header>
                <div class="text-2xl ">
                  运动经验
                </div>
              </template>
              在本系统中你可以获取一些他人的运动习惯，并且获得相关的推荐
            </el-card>
          </div>

        </div>




      </el-main>
      <el-footer >
        <div class="grid grid-cols-3 place-items-center	 gap-6 text-center">
          <div class="bg-red-200">
            邮箱:XXX@gmail.com
          </div>
          <div>
            电话:1XXXXX222
          </div>
          <div>
            地址:XXXXXXXXX
          </div>
        </div>

      </el-footer>
    </el-container>
</div>
 </template>
 
 <script setup>
 import {ref} from 'vue' 
 import {useRouter} from 'vue-router'
definePageMeta({
    layout: false,
})
 const router = useRouter();
 const login = ()=>{
   router.push({
     path:'/login'
   })
 }
 const pics = ref([
     "https://img95.699pic.com/photo/40007/1577.jpg_wh300.jpg",
     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRH-IzL-HRtKckVmiZ0Qsm_ZuG1-W4Mci9N2FEF8ymJAVCYpMElG3s_NA39yQ&s",
     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcPlJiFXYInnF_nmrSnl-J_WB7htk1w5hW9g&usqp=CAU",
     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGxJ11zOVvSmHW5lb3PI9fip3Iq36rlvo_Sw&usqp=CAU"
 ])
</script> 
 
 <style scoped>

.parent {
  position: relative;
}

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background: url(https://source.unsplash.com/random);
  z-index: -1;
}
 
</style>